<template>
  <div id="myPurchase-detail">
    <div class="filter-box">
      <div class="top-box">
          <div class="box-title">订单信息</div>
      </div>
      <a-row class="info">
        <a-col :span="8">
            <span class="info-left">购入项目</span>
            <a-select
                v-model="form.ncProjectName"
                style="width: 250px;"
                :showSearch="true"
                allowClear
                disabled
                placeholder="请选择购入项目">
                <a-select-option
                  v-for="(item,index) in projects"
                  :key="index"
                  :value="item.value"
                  >
                  {{ item.label }}
                </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="8">
            <span class="info-left">购入仓库</span>
            <a-select
              v-model="form.warehouseName"
              style="width: 250px;"
              :showSearch="true"
              allowClear
              disabled
              placeholder="请选择购入仓库">
                <a-select-option
                  v-for="(item,index) in warehouses"
                  :key="index"
                  :value="item.value"
                  >
                  {{ item.label }}
                </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="8">
            <span class="info-left">购入组织</span>
            <a-select v-model="form.orgName" style="width: 250px;" disabled  allowClear placeholder="请选择购入组织">
                <!-- <a-select-option
                  v-for="(item,index) in typeOne"
                  :key="index"
                  :value="item.value"
                  >
                  {{ item.label }}
                </a-select-option> -->
          </a-select>
        </a-col>
      </a-row>
      <a-row class="info">
        <a-col :span="8">
            <span class="info-left" style="padding-left: 15px;">联系人</span>
            <a-input
              v-model="form.recMan"
              placeholder="请输入联系人"
              style="width: 250px;"
              disabled
            />
        </a-col>
        <a-col :span="8">
            <span class="info-left">联系电话</span>
            <a-input-number
              v-model="form.recPhone"
              disabled
              placeholder="请输入联系电话"
              style="width: 250px;"
            />
        </a-col>
        <a-col :span="8">
            <span class="info-left">订单编号</span>
            <a-input
              v-model="form.shopOrderSn"
              placeholder="请输入订单编号"
              style="width: 250px;"
              disabled
            />
        </a-col>
      </a-row>
      <a-row class="info">
          <a-col :span="15" class="address">
                <span class="info-left">收货地址</span>
                <a-textarea
                    v-model="form.recAddress"
                    placeholder="请填写收货地址"
                    disabled
                    :auto-size="{ minRows: 3, maxRows: 5 }"
                />
          </a-col>
      </a-row>
      <a-row class="info">
          <a-col :span="8">
                <span class="info-left">调出项目</span>
                <a-input
                  v-model="form.saleProjectName"
                  placeholder="请输入调出项目"
                  style="width: 250px;"
                  disabled
                />
          </a-col>
          <a-col :span="8">
                <span class="info-left">调出组织</span>
                <a-input
                  v-model="form.saleOrgName"
                  placeholder="请输入调出组织"
                  style="width: 250px;"
                  disabled
                />
          </a-col>
      </a-row>
    </div>
    <div class="container">
      <div class="container-title">预订明细</div>
      <div class="title-info">
        <!-- <span class="info-left">项目：</span><span class="info-right">{{ncProjectName}}</span>
        <span class="info-left">所属组织：</span><span>{{orgName}}</span> -->
      </div>
      <div class="order-table">
        <a-row class="table-header">
          <!-- <a-col :span="1" ><a-checkbox v-model="checkAll" @change="changeCheckAll">
              </a-checkbox></a-col> -->
          <a-col :span="8" class="header-item">商品</a-col>
          <a-col :span="3" class="header-item">单价</a-col>
          <a-col :span="3" class="header-item">数量</a-col>
          <a-col :span="4" class="header-item">预订单价</a-col>
          <a-col :span="4" class="header-item">预订数量</a-col>
        </a-row>
      </div>

      <div
          class="table-item"
          v-for="(item, index) in tabelData"
          :key="index"
        >
          <a-row class="table-item-body">
            <!-- <a-col :span="1">
              <a-checkbox v-model="item.check"  @change="checkItem(item)">
              </a-checkbox>
            </a-col> -->
            <a-col :span="8" class="flex-row">
              <img :src="item.goodsPic" class="table-pic" />
              <div class="table-info">
                <p class="info-name">{{ item.ncMaterielName }}</p>
                <p>规格：{{ item.goodsSpec }}</p>
                <p>单位：{{ item.goodsUnit }}</p>
              </div>
            </a-col>
            <a-col :span="3" class="item-col">
              ￥{{ item.unitPrice }}
            </a-col>
            <a-col :span="3" class="item-col">
              {{ item.number }}
            </a-col>
            <a-col :span="4" class="item-col">
              ￥{{ item.buyPrice }}
            </a-col>
            <a-col :span="4" class="item-col">
              {{ item.buyNumber }}
            </a-col>

          </a-row>
        </div>
        <div class="table-empty" v-if="!tabelData.length">
          <img src="@/assets/images/empty.png" />
          <span>暂无数据</span>
        </div>
      <!-- <div class="page-box">
        <a-pagination
          size="small"
          :total="pageConfig.total"
          show-quick-jumper
          :show-total="(total) => `总共 ${pageConfig.total} 条数据`"
          @change="changePage"
        />
      </div> -->


    </div>
    <div class="filter-box" v-if="Data.length>0">
        <div class="top-box">
            <div class="box-title" style="margin-bottom: 20px;">收货记录</div>
        </div>
        <div class="delivery-record" v-for="item in Data" :key="item.titleId">
          <div class="circle"></div>
          <a-row class="record-info">
            <a-col :span='6'>
              <span>收货时间：</span>{{item.recTime}}
            </a-col>
            <a-col :span='6'>
              <span>非直调领用单号：</span>{{item.ccSn}}
            </a-col>
            <a-col :span='6'>
              <span>发货时间：</span>{{item.sendTime}}
            </a-col>
            <a-col :span='6'>
              <span>发货仓库：</span>{{item.recWarehouseName}}
            </a-col>
            <a-col :span='6'>
              <span>送货车牌号：</span>{{item.carNum}}
            </a-col>
          </a-row>
          <a-row class="record-info">
            <a-col :span="8">
              <span class="info-left">司机驾驶证照片：</span>
              <Upload
                :defaultList="item.driverFiles"
                disabled
                :limit="0"
              />
            </a-col>
            <a-col :span="8">
              <span class="info-left">其他照片：</span>
              <Upload
                :defaultList="item.files"
                disabled
                :limit="0"
              />
            </a-col>
          </a-row>
          <a-row class="record-info" v-if="item.receiveFiles.length>0">
            <a-col :span="24">
              <span class="info-left">收货图片：</span>
              <Upload
                :defaultList="item.receiveFiles"
                disabled
                :limit="0"
              />
            </a-col>
          </a-row>
          <DataTable
            :showConfig="false"
            rowKey="goodsId"
            :expand="false"
            :tableData="item.details"
            :tableColumn="tableColumn"
          >
          </DataTable>
        </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Ground extends Vue {
  form: any = {
    orgName: undefined,
    orgCode: undefined,
    warehouseId: undefined,
    warehouseName: undefined,
    recMan: undefined,
    recPhone: undefined,
    recAddress: undefined,
    ncProjectId: undefined,
    shopOrderSn: undefined
  }
  Data: any = []// 发货记录
  tabelData: any = []// 预订明细
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10
  }
  projects: any = [] // 购入项目列表
  warehouses: any = [] // 购入仓库
  checkGoodsList: any = [] // 选中的商品列表
  ncProjectName: any = '' // 项目名称
  orgName: any = '' // 组织名称
  checkAll:boolean= false
  showVisible:boolean= false
  driverFiles: any = [] // 驾驶证图片
  files: any = [] // 其他图片
  tableColumn: any = {
    goodsName: {
      label: '商品名称',
      // slot: true,
      width: 200
    },
    goodsSpec: {
      label: '规格',
      width: 120
    },
    goodsUnit: {
      label: '单位',
      width: 120
    },
    sendNumber: {
      label: '调出数量',
      width: 120
    },
    sendPrice: {
      label: '调出单价',
      width: 120
    },
    recNumber: {
      label: '调入数量',
      width: 120
    },
    recPrice: {
      label: '调入单价',
      width: 120
    }
  }

  get shopOrderTitleId () {
    return this.$route.query.shopOrderTitleId
  }


  init () {
    this.getDetail()
  }
  getDetail () {
    let data = {
      titleId: this.shopOrderTitleId
    }
    this.$api.orderMyDetailFetch(data).then((res: any) => {
      this.form = res.data
      this.tabelData = res.data.shopOrders.map((item:any) => ({...item, sendPrice: item.buyPrice, sendNumber: item.buyNumber}))
      this.Data = res.data.recVOS
      this.Data.forEach((item:any) => {
        item.details.forEach((kk:any) => {
          if (kk.recStatus != 'Y') {
            kk.recNumber = ''
            kk.recPrice = ''
          }
        })
        item.driverFiles = item.driverFiles.map((item2: any, index: number) => ({
          uid: -index - 1,
          url: item2.fileUrl,
          name: item2.fileUrl
        }))
        item.files = item.files.map((item2: any, index: number) => ({
          uid: -index - 1,
          url: item2.fileUrl,
          name: item2.fileUrl
        }))
        item.receiveFiles = item.receiveFiles.map((item2: any, index: number) => ({
          uid: -index - 1,
          url: item2.fileUrl,
          name: item2.fileUrl
        }))
      });
    });
  }
}
</script>

<style lang="scss" scoped>
#myPurchase-detail {
    .top-box{
      margin-bottom: 15px;
        .box-title{
            font-size: 16px;
            font-weight: 700;
            padding-left: 5px;
            color: #000;
            height: 15px;
            line-height: 15px;
            border-left: 3px solid rgb(62, 149, 231);
        }
    }
    .info{
        padding: 10px 0;
        .address{
          display: flex;
        }
        .info-left{
            width: 65px;
            margin-right: 10px;

        }
    }
    .container-title{
      font-size: 16px;
      font-weight: 700;
      padding-left: 5px;
      color: #000;
      height: 15px;
      line-height: 15px;
      border-left: 3px solid rgb(62, 149, 231);
    }
    .title-info{
      margin: 20px 0;
      font-size: 16px;
      .info-left{
        font-weight: 700;
      }
      .info-right{
        margin-right: 80px;
      }
    }
    .header-item{
      text-align: center;
    }
    .table-item{
      .table-item-body {
        border-bottom: 1px solid #F1F1F1;
        // border-top: 1px solid #F1F1F1;
        // margin-bottom: 16px;
        .ant-col {
            height: 152px;
            padding: 16px 20px;
            border-right: 1px solid #F1F1F1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #333;
            &:last-child {
                border-right: none;
            }
            p {
                margin-bottom: 0;
            }
            .table-pic {
                max-width: 160px;
                width: 50%;
                height: 120px;
                display: block;
                object-fit: cover;
                margin-right: 24px;
            }
            .table-info {
                display: flex;
                flex-direction: column;
                p {
                    font-size: 13px;
                    color: #999;
                }
                .info-name {
                    // @include limitLine(2);
                    margin-bottom: 16px;
                    font-size: 14px;
                    color: #000;
                    font-weight: 700;
                    // cursor: pointer;
                    // &:hover {
                    //     text-decoration: underline;
                    // }
                }
            }
        }
        .flex-row {
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            .ant-btn {
                margin-right: 12px;
                font-size: 12px;
            }
        }
        .item-col{
          text-align: center;
        }

    }
  }
}
.model-icon{
  color: green;

  .icon{
    font-size: 50px;
  }
}
.model-text{
  font-weight: 700;
  font-size: 16px;
}
.container{
  padding-bottom: 30px;
  border-bottom: 20px solid #ebf0f5;
  height: 450px;
  overflow-x: hidden;
	overflow-y: scroll;
}
.container::-webkit-scrollbar{
	display: none;
}
.delivery-record{
  margin: 0 10px;
  padding-left: 20px;
  border-left: 1px solid #4286ff;
  position: relative;
  padding-top: 30px;
  &:nth-child(2){
    padding-top: 0;
  }
  .circle{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #4286ff;
    background-color: #4286ff;
    position: absolute;
    left: -10px;
  }
  .record-info{
    margin-bottom: 15px;

  }
}
/deep/ .ant-select-selection-selected-value, .ant-input[disabled]{
  color: rgba(0, 0, 0, 0.8);
}
/deep/ .ant-input-number-input{
   color: rgba(0, 0, 0, 0.8) ;
 }
</style>
